<template>
    <div  v-loading="loading"  style="background:white;width: 100%;max-height:100%;overflow: auto;padding:30px;margin;10px;font-size:12px;margin-bottom:50px;" >
      <el-row>
            <el-col :span="24" style="border:0px;">
                <div class="grid-content"  >
            <div style="text-align:center;margin:auto;font-size:30px">{{title}}</div>
          </div>
        </el-col></el-row>
      <el-row  style="margin-top:20px">
        <el-col :span="11" style="text-align:center;align-items:center;align-content:center;justify-content: center;  height:380px;">
            <div class="echart-box" ref="bar"></div>
          </el-col> 
          <el-col :span="13"  style="display:grid; grid-template-columns: repeat(6, 1fr);gap: 20px 5px;" >
                <div  v-for="(item,index) in one" :key="index">
                  <div style="text-align:center;align-items:center;align-content:center;justify-content: center; margin-bottom:20px " >
                  <div style="margin-bottom:15px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                    <div :style="{'align-content':'center',width:'85px',height:'38px',border: '1px solid black',color:getColorName(item)}">{{item.deviceName}}</div>
                  </div>
                  <div style="width:85px;height:110px;text-align:center;align-items:center;border-style:double;border-width:5px;border-color:black;text-wrap:wrap;margin:auto;font-size:13px">
                        <div style="margin-top:20px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                          <div style="width:60px;height:40px;line-height:40px;margin-top:10px;border:1px solid black;text-align:center;">{{item.remark}}</div>
                        </div>
                        <div style="margin-bottom:10px;margin-top:10px;display:flex;width:100%;text-align:center;align-items:center;align-content:center;justify-content: center; ">
                          <div > 单位： {{item.unit}}</div>
                        </div>
                    </div>
                   </div>
                </div>
             
          </el-col>
        </el-row>

        <el-row style="margin-bottom:20px">
          <el-col :span="10"  style="display:grid; grid-template-columns: repeat(2, 1fr);gap: 10px 10px;" >
                <div  v-for="(item,index) in data.kaig" :key="index">
                  <div style="display:flex;margin-left:10px;margin-top:10px; ">
                      <div   :style="{width:'50%',color:getColorName(item)}" >{{item.deviceName}}</div>
                      <div style="width:60%;padding:1px;display:flex;text-align:center;align-items:center;">
                        <div style="width:50%;height:20px;border: 1px solid black;align-content:center">{{item.remark}}</div>
                        <div style="margin-left:5px;"> {{item.unit}}</div>
                      </div>
                     
                  </div>
              </div>
          </el-col>


          <el-col :span="14" style="display:grid; grid-template-columns: repeat(3, 1fr);gap: 10px 10px;" >
            <div v-for="(item,index) in data.moni" :key="index" style="width:100%">
              <div style="display:flex;margin-top:2px;width:100%;text-align:center;justify-content: start;">
                  <!-- <div class="circle"></div> -->
                  <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                  <div  :style="{'margin-left':'10px',color:getColorName(item)}" >{{item.deviceName}}</div>
              </div>
            </div>
          </el-col>
        </el-row>
    </div>

</template>
<script>
import deviceImg from '@/assets/images/device.png'
import { mapState } from "vuex";
// import datas from '@/utils/test.json';
import {listDevs} from  "@/api/system/device";
import { histogramData } from "@/api/system/chartConfig";

// import elementResizeDetectorMaker from 'element-resize-detector'
// const erd = elementResizeDetectorMaker()
 

// import echarts from "echarts"
export default {
name:"test",
mounted() {
  

      this.$nextTick(()=>{
        console.log("11")
        if(this.chart==null){
          this.chart = this.$refs.bar
        }
        this.barChar = this.$echarts.init(this.chart)
       
      }) 
  },
created(){
    this.title=("01"==this.type)?'左主机舵桨推进系统':("02==this.type")?'右主机舵桨推进系统':"主机舵桨推进系统"
    this.barTitle=("01"==this.type)?'左主机舵桨推进系统排气温度柱状图':('02'==this.type)?'右主机舵桨推进系统排气温度柱状图':'主机舵桨推进系统排气温度柱状图'
    this.devs=("01"==this.type)?this.devs_01:(("02"==this.type)?this.devs_02:this.dev)
    if(null==this.timer){
      this.timer=  setInterval(() =>{
      this.init();
      this.getData();
      this.$nextTick(() => {
                    this.barChar.resize()
                })
    },3000);
    }else{
      this.init()
    }
 
},
beforeDestroy() {
  // if(this.bar.timer){
  //   clearInterval(this.bar.timer);
  //   this.bar.timer=null;
  // }
  if(this.timer){
      clearInterval(this.timer);
      this.timer=null;
    }
},

methods:{
//   getResize(){
//    this.myChart1.resize();
//  },
//  statusCharts(){
//   console.log(this.option)
//   this.myChart1.setOption(this.option)//你Echarts配置项
//  },
  getMark(item){
    return null ==item.remark?"":item.remark
  },
  getUnit(item){
    return item.unit
  },
  getName(item){
    // return"0"
    return item.deviceName
  },

  init(){
    listDevs({"deptId":this.deptId}).then(response=>{
      // console.log(this.datas)
      this.loading=false
      let dataArr =response.data;
      if(dataArr){
  
        if(this.type=='01'){//左
                this.getList(dataArr,"左",true)

        }else if(this.type=='02'){//右
                this.getList(dataArr,"右",false)
        }else{

        }
        this.one=dataArr.filter(item=>{
           return  this.devs.includes(item.systemId)
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]}) 

      }
    })
  },
  getList(dataArr,f,v){
    this.data.moni= dataArr.filter(item=>{
          return   "MR" == item.modality  &&   ( item.deviceName.startsWith(f) ||( v && !item.deviceName.startsWith(f) && !item.deviceName.startsWith("右")))
         
        }).sort((a,b)=> {
          return a.systemId.split("-")[1]-b.systemId.split("-")[1]})

     

      this.data.kaig= dataArr.filter(item=>{
        return   "BA" == item.modality   && ( item.deviceName.startsWith(f) ||(v && !item.deviceName.startsWith(f) && !item.deviceName.startsWith("右")))
      }).sort((a,b)=> {
        return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
  },
  async   getData(){
    // console.log(111)
        await  histogramData({deviceGraphicalId:this.currentId}).then( async (response) =>
        {
          console.log("histogramData....")
        this.bar.data =  await response.data;
        // this.bar.data=datas
        // console.log(this.bar.data.data.data)
        let dataList  = this.bar.data.data
        this.bar.xDatas=   dataList.map(item=> {return item.deviceName});
        // console.log(this.bar.xDatas)
        this.bar.serials=   [{
                type:'bar',
                barWidth:'20',
                data: dataList.map(item=> {return item.value})
            }]
        console.log(this.bar.serials)

       })
       let xLabelWidth = ((this.barChar.getWidth()*1) -50-40)/ 10
//        console.log(this.option)
this.option.xAxis[0].axisLabel.width = xLabelWidth

       this.barChar.setOption(this.option,true);
      //  erd.listenTo(this.bar, function () {
      //         this.barChar.resize()
      //         // console.log(11)
      //       })

      
    },
    getFlash(row){
        //2、报警消息时，闪烁
        let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
        );
        if(f){
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
        if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
        {//1、试灯打开
          // console.log("extExpSwitch=="+this.extExpSwitch)
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
          return false;
      },
      getColorName(row){
       //告警消息
     if("2"== row.displayAlarm){
      let f = this.alarmList.some(alarm=>
          alarm ==row.deviceId
        );
        if(f){
          return 'red';
        }

         //3、显示设备状态颜色
         if(row.warnStatus=='1'||row.warnStatus=='0'){
                        return 'black';
                      }
                      return 'red'


     }
     return "black";

      },
       showGrid() {
          let object = {
            left: "1%", //图表距边框的距离
            right: "16%",
            top: "30%",
            bottom: "5px",
            containLabel: true,
          };
          return object;
        },
      getColor(row){
        // console.log(row)

             if("2"== row.displayAlarm){  //告警类型
                //告警消息
                let f = this.alarmList.some(alarm=>
                      alarm ==row.deviceId
                    );
                    if(f){//2、有报警通知，则显示灯的颜色
                      return row.lightColor;
                    }
                }
                if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
                  // console.log("extExpSwitch=="+this.extExpSwitch)
                    return row.lightColor;
                }
                //3、显示设备状态颜色
                if(row.warnStatus=='1'||row.warnStatus=='0'){
                  return 'grey';
                }
                return row.lightColor;


      }
},
computed:{
    ...mapState("app", {   // 对象形式
        alarmList: "alarmList",
        lightSwitch:"lightSwitch",
        extExpSwitch:"extExpSwitch"
    }),
    option(){
        return{
          tooltip: {
          trigger: 'item'
           },
       
           grid: {
            top: 50 + 28,
            right: 50,
            left: 30,
            bottom: 60,
            },

        title: {
          text:this.barTitle,
          left: 'center',
          textStyle: {
            fontSize: 15
          }
        },
        // legend: { top: '5px' },
            xAxis: [{
                name:"1s更新", //
                nameTextStyle:{
                  color:"black",
                  fontSize:9
                },
                type: 'category',
                 axisLabel: { 
                  // width:500,
                  overflow:"breakAll",
                  interval: 0,
                  // rotate: 40,
                  fontSize: 10,
                  marginLeft: 5,
//               formatter:function(val){
//     return val.split("").join("\n");
// },
// formatter: val => {
//                     let result= ''
//                   const textLength = val.length
//                     const limitNumber = 4 // 一行显示几个字
//                     if (textLength > limitNumber) {
//                       for (var i = 0; i < textLength; i += limitNumber) {
//                         result += val.substring(i, i + limitNumber) + '\n'
//                       }
//                       result = result.trim() // 移除最后一个换行符
//                     } else {
//                       result = val
//                     }
//                     return result
//                   },
              // formatter: val => {
              //       let result= ''
              //     const textLength = val.length
              //       const limitNumber = 8 // 一行显示几个字
              //       if (textLength > limitNumber) {
              //         for (var i = 0; i < textLength; i += limitNumber) {
              //           result += val.substring(i, i + limitNumber) + '\n'
              //         }
              //         result = result.trim() // 移除最后一个换行符
              //       } else {
              //         result = val
              //       }
              //       return result
              //   },
              // color: 'rgba(0, 0, 0, 0.88);',// x轴字体颜色
            },
            
               
                axisTick: {      // 坐标轴的刻度
                  show: true,    // 是否显示
                  inside: true,  // 是否朝内
                  length: 1,      // 长度
                  lineStyle: {
                    // color: 'red',  // 默认取轴线的颜色
                    width: 1,
                    type: 'solid'
                  }
                },
                axisLine: {
                  symbol: ['none', 'arrow'],  // 是否显示轴线箭头
                  symbolSize: [8, 8], // 箭头大小
                  symbolOffset: [0, 7],  // 箭头位置
                  inside: true,  // 是否朝内
                    onZero: false,
                    lineStyle: {
                    color: 'blue',
                    width: 1,
                    type: 'solid'
                  }
                },
                data:this.bar.xDatas// x轴
            }],
            yAxis: {
              // interval:20,
                name:this.bar.unit,
                type: 'value',//y轴
                axisLine: {    // 坐标轴 轴线
                    show: true,  // 是否显示
                    //  -----   箭头 -----
                    symbol: ['none', 'arrow'],  // 是否显示轴线箭头
                    symbolSize: [8, 8],  // 箭头大小
                    symbolOffset: [0, 7], // 箭头位置

                    // ----- 线 -------
                    lineStyle: {
                      color: 'blue',
                      width: 1,
                      type: 'solid'
                    }
                },
                axisLabel: {      // 坐标轴的标签
                  fontSize:9,
                  show: true,    // 是否显示
                  inside: false,  // 是否朝内
                  rotate: 0,     // 旋转角度
                  margin: 10,     // 刻度标签与轴线之间的距离
                  color: 'red',  // 默认轴线的颜色
                },
                axisTick: {      // 坐标轴的刻度
                  show: true,    // 是否显示
                  inside: true,  // 是否朝内
                  length: 6,      // 长度
                  lineStyle: {
                    // color: 'red',  // 默认取轴线的颜色
                    width: 1,
                    type: 'solid'
                  }
                },
                splitLine: {    // gird 区域中的分割线
                show: true,   // 是否显示
                lineStyle: {
                  color: '#666',
                  width: 1,
                  type: 'dashed'
                }
              },
              splitArea: {     // 网格区域
                show: false   // 是否显示，默认为false
              }

            },
            series:this.bar.serials
        }
    }
},
data() {
    return{
      chart:null,
      barChar:null,
      devs:[],
      devs_01:["01M-026","01M-027","01M-028","01M-029","01M-030","01M-031","01M-032","01M-033","01M-034","01M-037","01M-038","01M-039"],
      devs_02:["01M-001","01M-002","01M-003","01M-004","01M-005","01M-006","01M-007","01M-008","01M-009","01M-012","01M-013","01M-014"],
      myChart1:'',
      loading:true,
      barTitle:"",
      key1:"",
      key2:"",
      title:"",
      one:{deviceName:"",remark:"",unit:""},
      two:{deviceName:"",remark:"",unit:""},
      timer:null,
      data:{kaig:[],moni:[]},
      type:this.$route.query.type,
      deptId:this.$route.query.depCode,
      currentId:this.$route.query.graphId,//待定义displayAlarm
      img:deviceImg,
      animalv:"diagonal-line",
      animalv1:"diagonal-line1",
  
      name:this.$route.query.name,
      bar:{
        timer:null,
        time:this.$route.query.time,
        // data: datas,
        serials:[],
        xDatas:[],
        unit:this.$route.query.unit==1?'Kpa':'°C'
      }
    }
}
}
</script>
<style scoped >
.el-row {

&:last-child {
  margin-bottom: 0;
}
}

.el-col {
height: 100%;
/* border:1px solid; */
border-radius: 0px;
}
.circle{
border: 2px solid black;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
/* background-color: white; */

font-size: 13px;
}
.bg-purple-dark {
/* background: #99a9bf; */
}
.bg-purple {
/* background: #d3dce6; */
}
.line {
  border-right: 2px solid #010101;
  display: inline-block;
  /* margin-bottom: -12px; */
}

.bg-purple-light {
/* background: #e5e9f2; */
}
.grid-content {
text-wrap:wrap;
font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
}
.diagonal-line {
animation: rotate 1s linear infinite ;
animation-fill-mode:forwards;
animation-iteration-count: 1;
transform-origin: 0 0;
}

@keyframes rotate{
from{
transform: rotate(-40deg);
}
to{
transform: rotate(0deg);
}
}
.diagonal-line1 {
animation: rotate1 0.1s linear infinite ;
animation-fill-mode:forwards;
animation-iteration-count: 1;
transform-origin: 0 0;
}

@keyframes rotate1{
from{
transform: rotate(-0deg);
}
to{
transform: rotate(-40deg);
}
}
.item {
flex: 0 0 auto;
margin: 10px;
}
.row-bg {
padding: 10px 0;
/* background-color: #f9fafc; */
}

.alarmDiv{
      display:block;
      -webkit-animation-name: imageAnim;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function: ease;
      -webkit-animation-play-state: running;
  }
  @-webkit-keyframes imageAnim{
      0% {opacity: 1;}
      50% {opacity: 0.5;}
      100% {opacity: 0;}
  }
.echart-box {
  width: 100%;
  height: 100%;
  /* border: 3px solid pink; */
  /* margin: 20px auto; */
}  

</style>
